Vue.js 基础教程

1. Vue.js 简介

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它易于上手，同时功能强大，适合从简单的单页应用到复杂的单页应用开发。Vue.js 的核心库只关注视图层，易于与其他库或现有项目集成。

1.1 Vue.js 的历史

Vue.js 由尤雨溪（Evan You）在 2014 年创建。它的设计初衷是提供一个更灵活、更易于使用的替代方案，以取代当时流行的 Angular 和 React。Vue.js 迅速获得了开发者的青睐，成为前端开发中最受欢迎的框架之一。

2. 开发环境设置

在开始学习 Vue.js 之前，我们需要设置一个基本的开发环境。

2.1 安装 Node.js 和 npm

Vue.js 通常与 Node.js 和 npm（Node Package Manager）一起使用。首先，你需要安装 Node.js。安装完成后，npm 会自动安装。

# 检查 Node.js 和 npm 是否安装成功
node -v
npm -v

2.2 创建 Vue.js 项目

使用 Vue CLI（Command Line Interface）可以快速创建一个新的 Vue.js 项目。

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建新项目
vue create my-first-vue-app

# 进入项目目录
cd my-first-vue-app

# 启动开发服务器
npm run serve

3. Vue.js 基础概念

3.1 Vue 实例

每个 Vue 应用都是通过创建一个新的 Vue 实例开始的。Vue 实例是 Vue 应用的核心，它管理着应用的状态和行为。

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

3.2 模板语法

Vue.js 使用基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到 Vue 实例的数据。

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

3.3 数据绑定

Vue.js 使用 v-bind 指令来动态绑定 HTML 属性。

<template>
  <div id="app">
    <img v-bind:src="imageSrc" alt="Vue Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

3.4 事件处理

Vue.js 使用 v-on 指令来监听 DOM 事件。

<template>
  <div id="app">
    <button v-on:click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

3.5 条件渲染

Vue.js 使用 v-if 和 v-show 指令来根据条件渲染元素。

<template>
  <div id="app">
    <p v-if="isVisible">This is visible.</p>
    <p v-else>This is hidden.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

3.6 列表渲染

Vue.js 使用 v-for 指令来循环渲染列表。

<template>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

4. 实践练习

4.1 创建一个简单的待办事项应用

在这个练习中，我们将创建一个简单的待办事项应用，用户可以添加和删除待办事项。

<template>
  <div id="app">
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

5. 总结

通过本教程，你已经学习了 Vue.js 的基础知识，包括 Vue 实例、模板语法、数据绑定、事件处理、条件渲染和列表渲染。这些知识将为你进一步学习和使用 Vue.js 打下坚实的基础。

6. 下一步

接下来，你可以深入学习 Vue.js 的高级特性，如组件系统、路由、状态管理（Vuex）、以及如何与后端 API 进行交互。继续探索 Vue.js 的官方文档和社区资源，不断提升你的前端开发技能。

---

希望这篇教程对你有所帮助！如果你有任何问题或需要进一步的解释，请随时提问。